$(async function () {
  // 渲染管理员名称
  $('.admin').html(JSON.parse(sessionStorage.getItem('user')).username)
  // 渲染管理员头像
  $('.avatar img').attr('src', JSON.parse(sessionStorage.getItem('user')).avatar || 'https://yanxuan-item.nosdn.127.net/8b27deb1670c53e67c42ca3e1ed6fd12.jpg')


  // 退出登录
  $('#logout').click(function () {
    // 删除缓存的数据
    sessionStorage.removeItem('user')
    sessionStorage.removeItem('student-token')
    message('退出成功')
    redirect('login.html')
    return
  })

  // 显示学生列表
  await list()

  // 添加功能

  // 点击+按钮，显示添加学生的对话框
  // 获取添加的模态框对象
  const myAddModal = new bootstrap.Modal('#addModal')
  $('#openModal').click(function () {
    // 显示
    myAddModal.show()
  })

  // 获取省数据
  $('#addForm [name=province]').focus(async function () {
    const {
      data
    } = await http('/api/province')
    data.forEach(item => {
      $(this).append(`<option value="${item}">${item}</option>`)
    })
  })
  // 获取省对应的城市数据
  $('#addForm [name=province]').change(async function () {
    // 获取所选中的省份
    const pname = $(this).val()
    const {
      data
    } = await http({
      url: '/api/city',
      params: {
        pname
      }
    })
    // 清除原来的
    $('#addForm [name=city]').html('<option value="">--城市--</option>')
    $('#addForm [name=area]').html('<option value="">--地区--</option>')
    data.forEach(item => {
      $('#addForm [name=city]').append(`<option value="${item}">${item}</option>`)
    })
  })

  // 获取市对应的区数据
  $('#addForm [name=city]').change(async function () {
    // 获取所选中的城市
    const cname = $(this).val()
    // 获取对应的省份
    const pname = $('#addForm [name=province]').val()
    const {
      data
    } = await http({
      url: '/api/area',
      params: {
        pname,
        cname
      }
    })
    // 清除原来的
    $('#addForm [name=area]').html('<option value="">--地区--</option>')
    data.forEach(item => {
      $('#addForm [name=area]').append(`<option value="${item}">${item}</option>`)
    })
  })


  // 点击添加的确认按钮，实现添加学生功能
  $('#addSubmit').click(async function () {
    // 获取表单数据
    const data = serialize($('#addForm')[0], {
      hash: true
    })
    // 基本的数据校验
    // 姓名是中文，至少由2个汉字组成
    if (!/^[\u4e00-\u9fa5]{2,}$/.test(data.name)) {
      return message('姓名必须是2位以上的中文', 'error')
    }
    // 年龄18-35岁
    if (!/(^1[8-9]$)|(^2\d$)|(^3[0-5]$)/.test(data.age)) {
      return message('年龄必须在18-35岁之间', 'error')
    }
    // 组号只能是1-8组
    if (!/^[1-8]$/.test(data.group)) {
      return message('组号只能是1-8组', 'error')
    }
    // 期望薪资和实际薪资只能是正整数
    if (!/^[1-9]\d*$/.test(data.hope_salary)) {
      return message('期望薪资只能是正整数', 'error')
    }
    if (!/^[1-9]\d*$/.test(data.salary)) {
      return message('实际薪资只能是正整数', 'error')
    }
    // 省市区不能为空
    if (data.province === undefined) {
      return message('省必填', 'error')
    }
    if (data.city === undefined) {
      return message('市必填', 'error')
    }
    // 进行入库
    const {
      data: item // 返回的结果是最新添加的数据
    } = await http({
      method: 'POST',
      url: '/students',
      data: {
        ...data,
        age: +data.age,
        group: +data.group,
        salary: +data.salary,
        hope_salary: +data.hope_salary,
        gender: +data.gender,
      }
    })
    // 这里不重新获取学生数据源（因为我们的数据没有做分页处理，每次都请求完整的数据，对服务器压力比较大）
    // 操作dom
    $('.list').prepend(`<tr>
        <td>${item.name}</td>
        <td>${item.age}</td>
        <td>${item.gender===0 ? '男' : '女'}</td>
        <td>第${item.group}组</td>
        <td>${item.hope_salary}</td>
        <td>${item.salary}</td>
        <td>${item.province}-${item.city}-${item.area}</td>
        <td>
          <a data-id="${item.id}" href="javascript:;" class="text-success mr-3 btn-edit"><i class="bi bi-pen"></i></a>
          <a data-id="${item.id}" href="javascript:;" class="text-danger btn-del"><i class="bi bi-trash"></i></a>
        </td>
       </tr>`)
    // 提示信息
    message('添加学生成功')
    // 关闭模态框  
    myAddModal.hide()
  })

  // 监听添加的modal的关闭
  $('#addModal')[0].addEventListener('hidden.bs.modal', event => {
    // 重置表单
    resetForm()
  })

  // 修改功能
  // 点击修改图标打开修改的模态框
  let myEditModal = null
  $(document).on('click', '.btn-edit', async function () {
    // 获取修改的模态框对象
    myEditModal = new bootstrap.Modal('#editModal')
    // 获取省数据
    $('#editForm [name=province]').focus(async function () {
      const {
        data
      } = await http('/api/province')
      data.forEach(item => {
        $(this).append(`<option value="${item}">${item}</option>`)
      })
    })
    // 获取省对应的城市数据
    $('#editForm [name=province]').change(async function () {
      // 获取所选中的省份
      const pname = $(this).val()
      const {
        data
      } = await http({
        url: '/api/city',
        params: {
          pname
        }
      })
      // 清除原来的
      $('#editForm [name=city]').html('<option value="">--城市--</option>')
      $('#editForm [name=area]').html('<option value="">--地区--</option>')
      data.forEach(item => {
        $('#editForm [name=city]').append(`<option value="${item}">${item}</option>`)
      })
    })

    // 获取市对应的区数据
    $('#editForm [name=city]').change(async function () {
      // 获取所选中的城市
      const cname = $(this).val()
      // 获取对应的省份
      const pname = $('#editForm [name=province]').val()
      const {
        data
      } = await http({
        url: '/api/area',
        params: {
          pname,
          cname
        }
      })
      // 清除原来的
      $('#editForm [name=area]').html('<option value="">--地区--</option>')
      data.forEach(item => {
        $('#editForm [name=area]').append(`<option value="${item}">${item}</option>`)
      })
    })

    // 获取id
    const id = +$(this).data('id')
    const {
      data: row
    } = await http({
      url: '/students/' + id
    })
    // 给修改表单赋值
    Object.keys(row).forEach(key => {
      // 单独处理省市区数据
      if (key === 'province' || key === 'city' || key === 'area') {
        $(`#editForm [name=${key}`).html(`<option value="${row[key]}">${row[key]}</option>`)
      } else if (key === 'gender') {
        $('#editForm [name=gender]').each((index, obj) => {
          if (+obj.value === row.gender) {
            $(obj).attr('checked', true)
          }
        })
      } else {
        $(`#editForm [name=${key}]`).val(row[key])
      }
    })
    // 打开修改的模态框
    myEditModal.show()
  })

  // 确认修改
  $('#editSubmit').click(async function () {
    // 获取表单数据
    const data = serialize($('#editForm')[0], {
      hash: true
    })
    // 基本的数据校验
    // 姓名是中文，至少由2个汉字组成
    if (!/^[\u4e00-\u9fa5]{2,}$/.test(data.name)) {
      return message('姓名必须是2位以上的中文', 'error')
    }
    // 年龄18-35岁
    if (!/(^1[8-9]$)|(^2\d$)|(^3[0-5]$)/.test(data.age)) {
      return message('年龄必须在18-35岁之间', 'error')
    }
    // 组号只能是1-8组
    if (!/^[1-8]$/.test(data.group)) {
      return message('组号只能是1-8组', 'error')
    }
    // 期望薪资和实际薪资只能是正整数
    if (!/^[1-9]\d*$/.test(data.hope_salary)) {
      return message('期望薪资只能是正整数', 'error')
    }
    if (!/^[1-9]\d*$/.test(data.salary)) {
      return message('实际薪资只能是正整数', 'error')
    }
    // 省市区不能为空
    if (data.province === undefined) {
      return message('省必填', 'error')
    }
    if (data.city === undefined) {
      return message('市必填', 'error')
    }
    // 修改
    const {
      data: item // 返回的结果是最新添加的数据
    } = await http({
      method: 'PUT',
      url: '/students/' + data.id,
      data: {
        ...data,
        age: +data.age,
        group: +data.group,
        salary: +data.salary,
        hope_salary: +data.hope_salary,
        gender: +data.gender,
      }
    })
    // 这里不重新获取学生数据源（因为我们的数据没有做分页处理，每次都请求完整的数据，对服务器压力比较大）
    // 操作dom
    $('.btn-edit').each((index, obj) => {
      if (+$(obj).data('id') === item.id) {
        const tds = $(obj).parents('tr').find('td')
        tds[0].innerHTML = item.name
        tds[1].innerHTML = item.age
        tds[2].innerHTML = `${item.gender===0 ? '男' : '女'}`
        tds[3].innerHTML = `第${item.group}组`
        tds[4].innerHTML = item.hope_salary
        tds[5].innerHTML = item.salary
        tds[6].innerHTML = `${item.province}-${item.city}-${item.area}`
        tds[7].innerHTML = `<a data-id="${item.id}" href="javascript:;" class="text-success mr-3 btn-edit"><i class="bi bi-pen"></i></a>
        <a  data-id="${item.id}" href="javascript:;" class="text-danger btn-del"><i class="bi bi-trash"></i></a>`
      }
    })
    // 提示信息
    message('修改学生成功')
    // 关闭模态框  
    myEditModal.hide()
  })

  // 删除学生
  $(document).on('click', '.btn-del', async function () {
    // 获取要删除的数据id
    const id = $(this).data('id')
    if (!window.confirm('您确定要删除该数据吗?')) return
    await http({
      method: 'DELETE',
      url: `/students/${id}`
    })
    // 提示信息
    message('删除成功')
    // dom删除
    $(this).parents('tr').remove()
  })


})


// 重置表单
function resetForm() {
  $('#addForm')[0].reset()
  $('[name=province]').html('<option value="">--省份--</option>')
  $('[name=city]').html('<option value="">--城市--</option>')
  $('[name=area]').html('<option value="">--地区--</option>')
}


// 渲染学生列表
async function list() {
  // 调接口获取数据
  const {
    data
  } = await http({
    url: '/students'
  })
  const listHtml = []
  data.forEach(function (item) {
    listHtml.push(`<tr>
        <td>${item.name}</td>
        <td>${item.age}</td>
        <td>${item.gender===0 ? '男' : '女'}</td>
        <td>第${item.group}组</td>
        <td>${item.hope_salary}</td>
        <td>${item.salary}</td>
        <td>${item.province}-${item.city}-${item.area}</td>
        <td>
          <a data-id="${item.id}" href="javascript:;" class="text-success mr-3 btn-edit"><i class="bi bi-pen"></i></a>
          <a data-id="${item.id}" href="javascript:;" class="text-danger btn-del"><i class="bi bi-trash"></i></a>
        </td>
     </tr>`)
  })
  // 放到tbody中
  $('.list').html(listHtml.join(''))
  // 统计学生数量
  $('.total').html(data.length)
}